<template>
  <el-container>
    <el-header style="padding: 20px 20px 0 20px;height: initial">
      <el-form label-width="0" inline>
        <el-form-item label="">
          <el-input
            v-model="searchForm.name"
            placeholder="图标名称(模糊匹配)"
          />
        </el-form-item>
        <el-form-item label="">
          <el-button
            icon="el-icon-zoom-in"
            type="primary"
            plain
            @click="search"
          >查询</el-button>
          <el-button
            icon="el-icon-refresh"
            type="info"
            plain
            @click="reset"
          >清空</el-button>
          <el-button
            icon="el-icon-plus"
            type="primary"
            plain
            @click="add"
          >新增</el-button>

          <el-button
            icon="el-icon-close"
            type="danger"
            plain
            @click="deletes()"
          >批量删除</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        v-loading.fullscreen.lock="loading"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="45"
          show-overflow-tooltip
        />
        <el-table-column
          v-for="item in tableColumn"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          show-overflow-tooltip
        >
          <div v-if="item.prop === 'imgUrl'" slot-scope="scope">
            <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.imgUrl"
              :preview-src-list="[scope.row.imgUrl]"
            />
          </div>
          <div v-else slot-scope="scope">{{ scope.row[item.prop] }}</div>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="150px">
          <template slot-scope="scope">
            <div class="settings">
              <el-button
                type="warning"
                size="mini"
                plain
                @click="edit(scope.row)"
              >编辑</el-button>
              <el-button
                type="danger"
                size="mini"
                plain
                @click="deletes([scope.row[deleteKey]])"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="handleChangePageSize"
        @current-change="handleChangePageNo"
      />
    </el-footer>

    <el-dialog
      :title="dialogTitle"
      width="600px"
      :visible.sync="dialogValue"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form
        v-if="dialogValue"
        ref="ruleForm"
        style="margin-right: 20px"
        :model="ruleForm"
        :rules="rules"
        status-icon
        label-width="120px"
      >
        <el-form-item label="图标名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="图标图片" prop="imgUrl">
          <loon-upload ref="imgUrl" type="image/*" :folder="Base_API + '/icon/'" limit="1" :size="1024**2*2" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button
          type="primary"
          @click="save"
        >确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<style lang="less" scoped>
</style>
<script>
import { icon_request as request } from '@/api/permission'
import curd from '@/mixins/curd'
export default {
  name: 'Icon',
  mixins: [curd],
  data() {
    return {
      request: request,
      searchForm: {
        name: ''
      },
      tableColumn: [
        {
          prop: 'name',
          label: '图标名称'
        },
        {
          prop: 'imgUrl',
          label: '图标图片'
        },
        {
          prop: 'createTime',
          label: '创建时间'
        }
      ],
      ruleForm: {
        id: undefined,
        name: '',
        imgUrl: ''
      },
      reseForm: {
        id: undefined,
        name: '',
        imgUrl: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        imgUrl: [
          { required: true, message: '请上传图片', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.search()
  },
  methods: {
    formattTableData(tableData) {
      tableData.forEach(el => {
        el.createTime = new Date(el.createTime).format('yyyy-MM-dd hh:mm:ss')
      })
    },
    add() {
      this.ruleForm = { ...this.reseForm }
      this.dialogValue = true
    },
    edit(row) {
      for (const key in this.ruleForm) {
        this.ruleForm[key] = row[key]
      }
      this.ruleForm.id = row.id
      this.dialogValue = true
      this.$nextTick(() => {
        this.$refs['imgUrl'].reset(row.imgUrl ? [{ url: row.imgUrl }] : [])
      })
    },
    async save() {
      console.log(this.$refs['imgUrl'].isNull)
      if (this.$refs['imgUrl'].isNull()) {
        this.$message.error('图片未上传文件')
        return
      }
      const imgUrl = await this.$refs['imgUrl'].uploadFile()
      this.ruleForm.imgUrl = imgUrl[0]
      console.log(imgUrl)

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const methodName = this.ruleForm.id ? 'edit' : 'add'
          this.request[methodName]({ ...this.ruleForm })
            .then((data) => {
              this.play.message(this, data.status, data.errorMsg)
              this.search()
              this.dialogValue = false
            })
            .catch((error) => {
              console.info(error)
            })
        }
      })
    }
  }
}
</script>
